{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container-fluid py-3">
  <div class="row">
    <div class="col-md-4">
      <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
          <strong>{{ editing|yesno:'编辑邮箱,新建邮箱' }}</strong>
        </div>
        <div class="card-body">
          {% if saved %}
          <div class="alert alert-success py-2">已保存</div>
          {% endif %}
          {% if error_msg %}
          <div class="alert alert-danger py-2">{{ error_msg }}</div>
          {% endif %}
          {% if test_ok != None %}
          <div class="alert alert-{{ test_ok|yesno:'success,danger' }} py-2">{{ test_msg }}</div>
          {% endif %}

          <form method="post" action="">
            {% csrf_token %}
            {% if editing_mailbox %}
            <input type="hidden" name="mailbox_id" value="{{ editing_mailbox.id }}" />
            {% endif %}

            <div class="mb-2">
              <label class="form-label">名称</label>
              {{ form.name }}
            </div>
            <div class="row g-2">
              <div class="col-6">
                <label class="form-label">协议</label>
                {{ form.protocol }}
              </div>
              <div class="col-6">
                <label class="form-label">端口</label>
                {{ form.port }}
              </div>
            </div>
            <div class="mb-2 mt-2">
              <label class="form-label">主机</label>
              {{ form.host }}
            </div>
            <div class="mb-2">
              <label class="form-label">用户名</label>
              {{ form.username }}
            </div>
            <div class="mb-2">
              <label class="form-label">密码别名</label>
              {{ form.password_alias }}
              <div class="form-text">使用环境变量 MAILBOX_SECRET_别名 提供密码</div>
            </div>
            <div class="row g-2">
              <div class="col-8">
                <label class="form-label">文件夹</label>
                {{ form.folder }}
              </div>
              <div class="col-4 d-flex align-items-end">
                <div class="form-check me-3">
                  {{ form.use_ssl }} <label class="form-check-label ms-1">SSL</label>
                </div>
                <div class="form-check">
                  {{ form.enabled }} <label class="form-check-label ms-1">启用</label>
                </div>
              </div>
            </div>

            <div class="mb-2 mt-2">
              <label class="form-label">清洗分隔规则（正则）</label>
              {{ form.forward_patterns }}
              <div class="form-text">
                可填写 JSON 数组。
              </div>
            </div>

            <div class="mt-3 d-flex gap-2">
              <button class="btn btn-primary" type="submit">保存</button>
              <a class="btn btn-outline-secondary" href="/mailboxes">新建</a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="col-md-8">
      <div class="card shadow-sm">
        <div class="card-header">
          <div class="d-flex justify-content-between align-items-center">
            <strong>邮箱配置</strong>
            <form class="d-flex align-items-center" method="get" action="">
              <input type="text" name="kw" class="form-control form-control-sm me-2" placeholder="搜索 名称/用户名/主机" value="{{ kw }}" style="width: 220px;" />
              <select name="enabled" class="form-select form-select-sm me-2" style="width: 120px;">
                <option value="">全部</option>
                <option value="1" {% if enabled_selected == '1' %}selected{% endif %}>启用</option>
                <option value="0" {% if enabled_selected == '0' %}selected{% endif %}>禁用</option>
              </select>
              <select name="page_size" class="form-select form-select-sm me-2" style="width: 120px;">
                <option value="10" {% if page_size == 10 %}selected{% endif %}>每页 10</option>
                <option value="20" {% if page_size == 20 %}selected{% endif %}>每页 20</option>
                <option value="30" {% if page_size == 30 %}selected{% endif %}>每页 30</option>
                <option value="50" {% if page_size == 50 %}selected{% endif %}>每页 50</option>
                <option value="100" {% if page_size == 100 %}selected{% endif %}>每页 100</option>
              </select>
              <button class="btn btn-sm btn-outline-primary">筛选</button>
            </form>
          </div>
        </div>
        <div class="card-body p-0">
          <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
              <tr>
                <th style="width: 36px;">#</th>
                <th>名称</th>
                <th>主机</th>
                <th>用户名</th>
                <th>协议</th>
                <th>文件夹</th>
                <th>启用</th>
                <th style="width: 260px;" class="text-end">操作</th>
              </tr>
            </thead>
            <tbody>
              {% for m in mailboxes %}
              <tr>
                <td>{{ m.id }}</td>
                <td>
                  <a href="/mailboxes?mailbox_id={{ m.id }}">{{ m.name }}</a>
                </td>
                <td>{{ m.host }}:{{ m.port }}</td>
                <td>{{ m.username }}</td>
                <td>{{ m.protocol }}{% if m.use_ssl %} (SSL){% endif %}</td>
                <td>{{ m.folder }}</td>
                <td>
                  {% if m.enabled %}
                    <span class="badge bg-success">已启用</span>
                  {% else %}
                    <span class="badge bg-secondary">已禁用</span>
                  {% endif %}
                </td>
                <td class="text-end">
                  <div class="d-flex gap-2 justify-content-end flex-wrap">
                    <a class="btn btn-sm btn-outline-primary" href="/mailboxes?mailbox_id={{ m.id }}">编辑</a>
                    <form method="post" action="" class="m-0 p-0">
                      {% csrf_token %}
                      <input type="hidden" name="mailbox_id" value="{{ m.id }}" />
                      <input type="hidden" name="op" value="toggle" />
                      <button class="btn btn-sm btn-outline-warning">{{ m.enabled|yesno:'禁用,启用' }}</button>
                    </form>
                    <form method="post" action="" class="m-0 p-0" onsubmit="return confirm('确认删除该邮箱配置？');">
                      {% csrf_token %}
                      <input type="hidden" name="mailbox_id" value="{{ m.id }}" />
                      <input type="hidden" name="op" value="delete" />
                      <button class="btn btn-sm btn-outline-danger">删除</button>
                    </form>
                    <form method="post" action="" class="m-0 p-0">
                      {% csrf_token %}
                      <input type="hidden" name="mailbox_id" value="{{ m.id }}" />
                      <input type="hidden" name="op" value="test" />
                      <button class="btn btn-sm btn-outline-success">连接测试</button>
                    </form>
                    <form method="post" action="" class="m-0 p-0">
                      {% csrf_token %}
                      <input type="hidden" name="mailbox_id" value="{{ m.id }}" />
                      <input type="hidden" name="op" value="fetch" />
                      <input type="hidden" name="limit" value="20" />
                      <button class="btn btn-sm btn-outline-secondary">拉取20封</button>
                    </form>
                  </div>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="8" class="text-center text-muted py-4">暂无配置</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
          <div class="text-muted small">共 {{ page_obj.paginator.count }} 条，页 {{ page_obj.number }}/{{ page_obj.paginator.num_pages }}</div>
          <nav>
            <ul class="pagination pagination-sm mb-0">
              {% if page_obj.has_previous %}
              <li class="page-item"><a class="page-link" href="?page=1&kw={{ kw }}&enabled={{ enabled_selected }}&page_size={{ page_size }}">首页</a></li>
              <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}&kw={{ kw }}&enabled={{ enabled_selected }}&page_size={{ page_size }}">上一页</a></li>
              {% else %}
              <li class="page-item disabled"><span class="page-link">首页</span></li>
              <li class="page-item disabled"><span class="page-link">上一页</span></li>
              {% endif %}
              <li class="page-item active"><span class="page-link">{{ page_obj.number }}</span></li>
              {% if page_obj.has_next %}
              <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}&kw={{ kw }}&enabled={{ enabled_selected }}&page_size={{ page_size }}">下一页</a></li>
              <li class="page-item"><a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&kw={{ kw }}&enabled={{ enabled_selected }}&page_size={{ page_size }}">末页</a></li>
              {% else %}
              <li class="page-item disabled"><span class="page-link">下一页</span></li>
              <li class="page-item disabled"><span class="page-link">末页</span></li>
              {% endif %}
            </ul>
          </nav>
        </div>
      </div>
    </div>
{% endblock %}